<template>
  <div class="payment">
    <el-card class="box-card">
      <div slot="header" class="card-title clearfix">
        <span>订单支付</span>
      </div>
      <el-form status-icon label-width="100px">
        <el-form-item label="订单号">
          <el-input
            type="text"
            v-model="orderId"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="用户名">
          <el-input
            type="text"
            v-model="username"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="订单名称">
          <el-input
            type="text"
            value="托马斯商城"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="购买详情">
          <el-input
            type="textarea"
            autosize
            v-model="purchaseDetail"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="商品总价">
          <el-input
            type="text"
            v-model="totalPrice"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="折扣">
          <el-input
            type="number"
            :precision="2"d
            v-model="discount"
            :disabled="true">
          </el-input>
        </el-form-item>

        <el-form-item label="付款金额">
          <el-input
            type="number"
            :precision="2"
            v-model="paymentAmount"
            :disabled="true">
          </el-input>
        </el-form-item>

        <div style="display: flex; justify-content: center;">
          <el-button type="warning" @click="$router.push('/')" v-if="paid">
            返回首页
          </el-button>
          <el-button icon="el-icon-money" style="width: 30%;" type="primary" @click="pay('orderId')" v-else>
            付款
          </el-button>
        </div>
        <div style="display: flex; justify-content: center; margin: 20px">
          <span v-if="paid" style="color: #dd4444">此订单已完成，请勿重复付款！</span>
          <span v-else style="color: darkkhaki">点击以完成付款！</span>
        </div>

      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Payment",
  created() {
    this.userInfo = this.$store.getters.getUser;
    if (this.userInfo === null) {
      this.$message({
        message: '请先登录！',
        type: 'warning'
      });
      this.$router.push("/login");
      return;
    }
    this.orderId = this.$route.params.id;
    this.$axios.get("/order-dto/order/" + this.orderId).then(res => {
      let paymentDto = res.data.data;
      // console.log(paymentDto);
      this.orderDetails = paymentDto.orderDetails;
      let orderSurvey = paymentDto.orderSurvey;
      this.username = orderSurvey.userName;
      this.totalPrice = orderSurvey.totalPrice;
      this.paymentAmount = orderSurvey.paymentAmount;
      this.discount = orderSurvey.discount;
      this.paid = (orderSurvey.status === "已支付");
    });
  },
  data() {
    return {
      orderId: null,
      username: null,
      totalPrice: 0,
      discount: 0,
      paymentAmount: 0,
      orderDetails: [],
      paid: false
    };
  },
  computed: {
    purchaseDetail() {
      let res = "";
      for (let idx in this.orderDetails) {
        let orderDetail = this.orderDetails[idx];
        res += orderDetail.productName + " * " + orderDetail.purchaseQuantity + "\n";
      }
      return res;
    }
  },
  methods: {
    pay() {
      let _this = this;
      _this.$axios.put("/order-survey/pay/" + this.orderId).then(res => {
        _this.$message({
          message: '支付成功！获得积分: ' + _this.paymentAmount + ", 当前积分: " + res.data.data.score,
          type: 'success'
        });
        _this.$store.commit('SET_USERINFO', res.data.data)
        _this.$router.push("/mall/orders");
      })
    }
  }
}
</script>

<style scoped>
.payment {
  display: flex;
  justify-content: center;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.card-title {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 18px;
}

.el-button {
  margin-right: 20px;
}
</style>